<template>
	<com-page ref="page" bgColor="linear-gradient(180deg, rgba(236, 246, 255, 1) 0, rgba(255, 255, 255, 1) 800rpx)">

		<home-navbar :bgColor="scrollTop === 0 ? 'rgba(255,255,255,0)' : '#ffffff'" @height="navbarHeightFn" />
		<home-search :bgColor="scrollTop === 0 ? 'rgba(255,255,255,0)' : '#ffffff'" :top="navbarHeight" @height="searchHeightFn" />
		<view class="patient">
			<com-patient type="card" :previewTop="navbarHeight" :previewBgColor="scrollTop === 0 ? 'rgb(239, 247, 255)' : ''" @select='selectFn' />
		</view>
		<view class="main-menu gy-custom-card">
			<com-menu :list="centerMenu" mode="grid" :cols="centerMenu.length" @select="selectMenuFn" />
		</view>
		<view class="top-menu">
			<com-menu :list="topMenu" mode="grid" :cols="topMenu.length" @select="proxy.utils.system.customGo($event, 1)" />
		</view>
		
		
	
		<!-- 提醒 -->
		<!-- <view class="by-remind">
			<home-remind name="预约提醒" icon="gy_icon_reservation" stateType="1" details="true" />
		</view> -->
		<!-- 待办 -->
		<home-wait-processing :list="waitProcessingList" />
		<!-- 轮播 -->
		<view class="banner gy-custom-card">
			<com-banner v-if="banner.length > 0" :list="banner" />
			<com-image v-else mode="" :height="200" :radius="20" />
		</view>
		<!-- 便民服务 -->
		<view class="hospital-menu">
			<com-title-bar name="院内便民服务" icon="gy_icon_nurse" />
			<com-menu :list="bottomMenu" mode="grid" :cols="4" @select="proxy.utils.system.customGo($event, 1)" />
		</view>
		<view v-if="goodIsOpen" class="goods-panel">
			<com-title-bar name="商城服务" icon="gy_icon_infusionSolid" showMore @more="proxy.utils.uni.route.go('/pages-mall/index')" />
			<view class="goods-panel-content">
				<view class="goods-panel-tip">药品/服务包/医用耗材</view>
				<view class="goods-panel-list">
					<view class="goods-panel-item" v-for="(item,index) in productList" :key="index"
						@click.stop="proxy.utils.uni.route.go('/pages-mall/goods-details?id=' + item.id)">
						<com-image :src="item.coverImg" mode="" :height="160" :radius="20" />
						<view class="goods-panel-name">{{ item.name }}</view>
						<view class="goods-panel-price">
							<com-price-text :size="36" :price="item.price" /><text>起</text>
						</view>
					</view>
				</view>
				<com-empty v-if="productList.length === 0" text=" " :iconSize="180" />
			</view>
		</view>
		<view class="dept-panel">
			<com-title-bar name="推荐科室" icon="gy_icon_huizhang" @more="hotDeptFn('')" showMore />
			<view class="dept-panel-content">
				<view class="dept-panel-list">
					<view class="dept-panel-item" v-for="(item,index) in hotDepts" :key="index" @click="hotDeptFn(item.id)">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<view class="dept-panel">
			<com-title-bar name="推荐专家" icon="gy_icon_huizhang" @more="proxy.utils.uni.route.go('/pages-hospital-services/ask-diagnosis/quick')" showMore />
			<!-- <view class="dept-panel-content">
				<view class="dept-panel-tip">本院专家医生团队</view>
			</view> -->
		</view>
		<com-dropdown-menu ref="dropdownMenu" :top="navbarHeight + searchHeight">
			<com-dropdown-menu-item v-model="searchForm.type" defaultValue="医护" :option="sort.doctorOption"
				@change="query" />
			<com-dropdown-menu-item v-model="searchForm.department" defaultValue="科室" :option="sort.deptOption"
				@change="query" />
			<com-dropdown-menu-item v-model="searchForm.position" defaultValue="职称" :option="sort.titleOption"
				@change="query" />
			<!-- <com-dropdown-menu-item v-model="searchForm.orderField" defaultValue="排序" :option="sort.multipleOption"
				@change="query" /> -->
		</com-dropdown-menu>
		<com-panel-doctor-list :list="list" />
		<!-- 客服二维码 -->
		<view class="code-box" v-if="imageMenu.show">
			<view class="quick-code">
				<view class="quick-code-image">
					<com-image mode="" :width="550" :height="822" showMenuByLongpress :src="imageMenu.src" />
				</view>
				<view class="quick-code-icon" @click.stop="imageMenu.show = false">
					<com-icon name="gy_icon_close" color="#fff" :size="28" />
				</view>
			</view>
		</view>
		<!-- 智能导诊 -->
		<view class="code-box" v-if="hospitalGuide.show">
			<view class="quick-code">
				<view class="quick-code-image quick-code-images" @click="hospitalGuides">
					<!-- <com-image mode="" :width="520" :height="760"  :src="hospitalGuide.src" /> -->
					<image :src="hospitalGuideImage" mode=""></image>
				</view>
				<view class="quick-code-icon" @click.stop="hospitalGuide.show = false">
					<com-icon name="gy_icon_close" color="#fff" :size="28" />
				</view>
			</view>
		</view>
		
		<!-- 温馨提示 -->
		<view class="code-box" v-if="reminderShow">
			<view class="reminder-code">
				<view class="reminder-title">
					温馨提示
				</view>
				<view class="reminder-text">
					因浙江萧山医院互联网医院更新升级，未在微信小程序上绑定过就诊人信息的需重新绑定，给您带来不便，敬请谅解！
				</view>
				<view class="reminder-button">
					<com-button @click="reminder">已绑定</com-button>
					<com-button type="remind" @click="bindUser">去绑定</com-button>
				</view>
			</view>
		</view>
	</com-page>
</template>

<script lang="ts" setup>
	import {
		ref,
		computed,
		getCurrentInstance
	} from "vue";

	import {
		onPageScroll,
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';

	import { usePaging } from "@/mixins/usePage.js"

	import { getHomeRecommendDoctorPage } from "@/request/apis/doctor.js";
	import { getBannerList } from "@/request/apis/banner.js";
	import { getPageConfigList } from "@/request/apis/pageConfig.js";
	import { getDeptList, getHotDeptList } from "@/request/apis/dept.js";
	import { getProductListRecommend } from "@/request/apis/mall.js";
	import {
		getWaitProcessingList
	} from "@/request/apis/wait-processing.js";

	import HomeNavbar from "./components/home-navbar.vue";
	import HomeSearch from "./components/home-search.vue";
	import HomeWaitProcessing from "./components/home-wait-processing.vue";

	const { proxy } : any = getCurrentInstance();

	const page = ref(null);

	const patient = computed(() => proxy.store.patient.current);
	const hospitalGuideImage = computed(() => proxy.utils.image.fullPath("hospitalGuide.png"));
	const goodIsOpen = ref(proxy.utils.system.getConfig("mall.isopen"));
	const navbarHeight = ref(0);
	const searchHeight = ref(0);
	const dropdownMenu : any = ref(null);
	const reminderShow = ref(true)
	const searchForm = ref({
		type: "",
		department: "",
		position: "",
		orderField: ""
	});
	const { list, query } = usePaging(getHomeRecommendDoctorPage, searchForm.value);
	const newTabList = ref(['便民服务', '便民服务1', '便民服务2']);

	// const currentNewsType = ref(0);

	const scrollTop = ref(0);

	const banner = ref([]);

	const currentType = ref(0)

	const productList = ref([]);

	const waitProcessingList = ref([]);

	const hotDepts = ref([]);

	const imageMenu = ref({
		show: false,
		src: "https://oss.xawellcare.com/temp/477ca0ec9846f5815eb7482673fe5ab8520c9b7626135b1809dd6bea48f4a362.jpg"
	});
	
	const hospitalGuide = ref({
		show: false,
		src: proxy.utils.image.fullPath("hospitalGuide.png")
	});
	
	function hospitalGuides(){
		uni.navigateTo({
			url:'/pages-hospital-services/ai-guidance/index'
		})
	}

	const remindNum = ref(0)

	const sort = ref({
		doctorOption: [
			{ label: "全部", value: "" },
			{ label: "医生", value: "1" },
			{ label: "护士", value: "2" }
		],
		deptCur: 0,
		deptOption: [],
		titleOption: [
			{ label: "全部", value: "" },
			{ label: "主任医师", value: "01" },
			{ label: "副主任医师", value: "0101" },
			{ label: "主治医师", value: "0102" },
			{ label: "住院医师", value: "0103" },
			{ label: "主任护师", value: "0301" },
			{ label: "副主任护师", value: "0302" },
			{ label: "主管护师", value: "0303" },
			{ label: "护师", value: "0304" }
		],
		multipleOption: [
			{ label: "全部", value: "" },
			{ label: "服务星级", value: "1" },
			{ label: "服务人数", value: "2" }
		]
	});

	const topMenu = ref([{ iconSize: 96 }, { iconSize: 96 }, { iconSize: 96 }, { iconSize: 96 }, { iconSize: 96 }])//极速问诊等等
	const centerMenu = ref([{ iconSize: 100 }, { iconSize: 100 }, { iconSize: 100 }, { iconSize: 100 }])//中部菜单
	const bottomMenu = ref([
		{ iconSize: 86 },
		{ iconSize: 86 },
		{ iconSize: 86 },
		{ iconSize: 86 },
		{ iconSize: 86 },
		{ iconSize: 86 },
		{ iconSize: 86 },
		{ iconSize: 86 }
	]); //底部菜单-便民服务等

	let setDropdownMenuTimer : any = null;

	function selectMenuFn(item: any){
		if(item.label === "就医咨询"){
			imageMenu.value = {
				show: true,
				src: "https://oss.xawellcare.com/temp/477ca0ec9846f5815eb7482673fe5ab8520c9b7626135b1809dd6bea48f4a362.jpg"
			}
		}else{
			proxy.utils.system.customGo(item, 1)
		}
	}

	function navbarHeightFn(h : number) {
		navbarHeight.value = h;
	}

	function searchHeightFn(h : number) {
		searchHeight.value = h;
	}

	function hotDeptFn(id : string) {
		proxy.utils.uni.route.go("/pages-hospital-services/departmentsIntroduce/index?id=" + id);
	}

	function initDropdownMenuTopFn() {
		clearTimeout(setDropdownMenuTimer);
		setDropdownMenuTimer = setTimeout(() => {
			dropdownMenu.value.initFn();
		}, 50);
	}

	function initFn() {
		// 菜单
		getPageConfigList().then(res => {
			topMenu.value = res.filter(o => o.type == 1).map(o => {
				return {
					iconSize: 56,
					label: o.title,
					...o
				}
			});
			centerMenu.value = res.filter(o => o.type == 2).map(o => {
				return {
					iconSize: 100,
					label: o.title,
					subLabel: o.subTitle,
					...o
				}
			});
			bottomMenu.value = res.filter(o => o.type == 3).map(o => {
				return {
					iconSize: 70,
					label: o.title,
					...o
				}
			});
		})
		// banner
		getBannerList(1).then(res => {
			banner.value = res
		})
		// 商品
		getProductListRecommend().then((res : any) => {
			productList.value = res;
		}).catch(() => {
			productList.value = [];
		});
		// 科室
		getDeptList().then(res => {
			sort.value.deptOption = [{ label: "全部", value: "" }, ...res.map((o : { name : any; id : any; }) => {
				return {
					label: o.name,
					value: o.id
				}
			})]
		})
		// 热门科室
		getHotDeptList().then(res => {
			hotDepts.value = res
		});
	}

	function selectFn() {
		console.log(patient.value,1211111111111111)
		getWaitProcessingList({ patientId: patient.value.id }).then(res => {
			waitProcessingList.value = res ? res : [];
		}).catch(err => {
			console.log(err)
		});
	}

	onPageScroll((e : any) => {
		initDropdownMenuTopFn();
		scrollTop.value = e.scrollTop;
	});

	onLoad(() => {
		initFn();
		query();
	});

	onShow(() => {
		if(patient.value?.id){
			getWaitProcessingList({ patientId: patient.value.id }).then(res => {
				waitProcessingList.value = res ? res : [];
			}).catch(err => {
				console.log(err)
			});
		}
	});

	// 朋友圈分享
	onShareAppMessage(() => {
		return proxy.utils.system.share(getCurrentPages(), uni.getStorageSync("system-hospital").name);
	})

	// 朋友圈分享
	onShareTimeline(() => {
		return proxy.utils.system.share(getCurrentPages(), uni.getStorageSync("system-hospital").name);
	})
	
	function reminder(){
		reminderShow.value = false
		hospitalGuide.value.show = true
	}
	
	function bindUser() {
		proxy.utils.uni.route.go("/pages-personal/my-patient/index");
		hospitalGuide.value.show = true
	}
	
</script>

<style lang="scss" scoped>
	.patient {
		:deep(.gy-patient) {
			.gy-patient-card {
				margin-top: 0;
			}

			.gy-patient-card-no {
				margin-top: 0;
			}
		}
	}

	.top-menu {
		// box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .03), 0px 8px 20px rgba(0, 0, 0, .03);
		margin: 0 40rpx 40rpx 40rpx;
	}

	.main-menu {
		padding: 0;
		margin-top: 40rpx;
		background-color: transparent;

		:deep(.gy-menu) {
			background-color: transparent;
		}

		:deep(.gy-grid) {
			background-color: transparent;

			.gy-grid-item {
				background-color: transparent;

				.gy-grid-item-box {
					background-color: transparent;

					.gy-menu-grid-label {
						font-weight: bold;
						font-size: 32rpx !important;
						line-height: 36rpx !important;
					}
				}
			}
		}
	}

	.banner {
		padding: 0;
		margin-bottom: 0;
	}

	.hospital-menu {
		margin-top: 0;
		margin-bottom: 0;

		.home-tab {

			.tab-list {
				display: flex;
				align-items: center;
				width: calc(100% - 50rpx);
				overflow: hidden;

				.tab-list-item {
					width: 220rpx;
					height: 88rpx;

					.tab-item-title {
						font-weight: bold;
						font-size: 32rpx;
						color: #2E344A;
					}

					.tab-item-bottom {
						width: 60rpx;
						height: 6rpx;
						background: rgba(87, 149, 255, 0.39);
						border-radius: 100rpx;
					}
				}
			}
		}

		:deep(.gy-menu) {
			margin: 0 var(--gy-gap);
		}

		:deep(.gy-menu-grid-icon) {
			image {
				width: 48rpx !important;
				height: 48rpx !important;
			}
		}
	}

	.goods-panel {
		margin-bottom: 0;

		.goods-panel-content {
			margin-top: -20rpx;

			:deep(.gy-empty) {
				padding: 30rpx 0 0 0;
			}

			.goods-panel-tip {
				font-size: var(--gy-font-size-base);
				color: var(--gy-text-color-secondary);
				padding: 0 var(--gy-gap);
			}

			.goods-panel-list {
				overflow-x: auto;
				overflow-y: hidden;
				white-space: nowrap;
				padding: 0 var(--gy-gap);
				margin-top: var(--gy-gap);

				.goods-panel-item {
					display: inline-block;
					width: 40%;

					image.gy-image {
						margin: 0 auto;
						width: 100%;
					}

					.goods-panel-name {
						margin-top: var(--gy-gap);
						display: block !important;
						width: 100%;
						font-size: 30rpx;
						color: var(--gy-text-color-primary);
						@include text-ellipsis(1);
					}

					.goods-panel-price {
						margin-top: 10rpx;
						width: 100%;
						color: #F64E32;
						font-size: var(--gy-font-size-small);

						text {
							margin-left: 5rpx;
						}
					}
				}

				.goods-panel-item+.goods-panel-item {
					margin-left: var(--gy-gap);
				}
			}
		}
	}

	.dept-panel {
		.dept-panel-content {
			margin-top: -20rpx;

			.dept-panel-tip {
				font-size: var(--gy-font-size-base);
				color: var(--gy-text-color-secondary);
				padding: 0 var(--gy-gap);
			}

			.dept-panel-list {
				@include grid(3);
				gap: 15rpx;
				padding: var(--gy-gap);

				.dept-panel-item {
					border: 1rpx solid var(--gy-text-color-primary);
					border-radius: var(--gy-border-radius-medium);
					padding: 0 10rpx;
					color: var(--gy-text-color-primary);
					font-size: var(--gy-font-size-base);
					@include text-ellipsis(1);
					line-height: 60rpx;
					text-align: center;
				}
			}
		}
	}

	:deep(.gy-dropdown-menu) {
		border-top: 1rpx solid var(--gy-card-line-color);
	}

	.code-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.59);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;

		.quick-code {
			height: 924rpx;
			width: 550rpx;
			z-index: 300;
			margin-top: 85rpx;

			.quick-code-image {
				background: rgba(255, 255, 255, 0.39);
				border-radius: 20rpx;
			}

			.quick-code-icon {
				margin:  50rpx auto;
				width: 56rpx;
				height: 56rpx;
				border: 2rpx solid #ffffff;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
	}

	:deep(.gy-title-bar-left) {
		text {
			margin-left: 10rpx;
		}
	}
	.quick-code-images{
		background: rgba(255, 255, 255, 0) !important;
		border-radius: 20rpx;
		image{
			width: 520rpx;
			height: 760rpx;
			margin: auto;
			display: table;
		}
	}
	:deep(.gy-menu-grid-label){
		    padding: 0 !important;
			-webkit-line-clamp: inherit !important;
	}
	.reminder-code{
		width: 70%;
		z-index: 300;
		padding: 50rpx;
		border-radius: 30rpx;
		margin-top: 85rpx;
		background: #ffffff;
		.reminder-title{
			font-weight: 600;
			font-size: 36rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
		.reminder-text{
			margin-bottom: 30rpx;
			line-height: 50rpx;
		}
		.reminder-button{
			display: flex;
			justify-content: center;
			align-items: center;
			:deep(.gy-button):nth-child(1){
				margin-right: 20rpx;
			}
		}
	}
</style>
 